<template>
  <div class="good-list">
    <Navigation></Navigation>

    <div class="list">
      <el-row class="row-bg" :gutter="20">
        <el-col :span="6" v-for="goodInfo in goods" :key="goodInfo.goodId">
          <div class="grid-content bg-purple">
            <el-card shadow="hover" class="good-info-card">
              <img :src="goodInfo.good_img" class="image" />
              <div class="base-info">
                <div class="seckill-good-name">
                  产品名: {{ goodInfo.good_title }}
                </div>
                <div class="seckill-good-price">
                  秒杀价: {{ goodInfo.seckill_price }}元
                </div>
                <div class="seckill-good-surplus">
                  剩余量: {{ goodInfo.remain }}件
                </div>
                <div class="seckill-seckill-time">
                  开始时间:
                  {{ goodInfo.start_time | dateFormat("yyyy-mm-dd hh:mm:ss") }}
                </div>
              </div>
              <router-link
                :to="'/goodDetail/' + goodInfo.good_id"
                class="to-good-detail"
              >
                <el-button type="primary" class="to-detail">查看详情</el-button>
              </router-link>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getGoodList } from "@/api/good";

export default {
  name: "GoodList",
  data() {
    return {
      goods: {},
    };
  },
  created() {
    this.queryGoodList();
  },
  methods: {
    queryGoodList() {
      getGoodList().then((res) => {
        this.goods = res.data;
      });
    },
  },
  filters: {
    dateFormat: function (val, args) {
      var time = new Date(val);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var day = time.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      if (args.toLowerCase() === "yyyy-mm-dd") {
        return year + "-" + month + "-" + day + "-";
      } else {
        var hour = time.getHours();
        var min = time.getMinutes();
        var sec = time.getSeconds();
        if (hour < 10) hour = "0" + hour;
        if (min < 10) min = "0" + min;
        if (sec < 10) sec = "0" + sec;
        return (
          year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec
        );
      }
    },
  },
};
</script>

<style>
.good-list {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("../assets/register.png");
  width: 100%;
  background-size: cover;
  min-height: 100vh;
}

.list {
  padding-top: 1%;
  margin-left: 5%;
  margin-right: 5%;
  padding-bottom: 5%;
}

.el-col {
  margin-top: 25px;
}

.good-info-card {
  width: 280px;
  padding-left: 4px;
  margin-left: 10px;
}

.image {
  width: 235px;
  height: 236px;
}

.base-info {
  line-height: 30px;
  font-size: 16px;
  margin-bottom: 10px;
}

.seckill-time {
  font-weight: bold;
}

.to-good-detail {
  text-decoration: none;
  color: white;
}

.to-detail {
  width: 200px;
  height: 50px;
  font-size: 16px;
  letter-spacing: 5px;
  margin-left: 20px;
}
</style>
